<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-title">施工现场安全帽识别系统</div>
      <div class="header-user">
        <span @click="pathto('main')">检测界面</span>
        <span @click="pathto('userList')">账号管理</span>
        <span @click="pathto('history')">历史检测信息</span>
        <span class="username" @click="pathto('login')">退出登录</span>
      </div>
    </el-header>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="data-cards">
      <el-col :span="6">
        <el-card class="card">
          <div class="card-title">总监测帧数</div>
          <div class="card-value">{{this.oldList.length}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="card-title">佩戴率</div>
          <div class="card-value">{{pdl}}%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="card-title">违规率</div>
          <div class="card-value">{{this.oldList.length===0?'0':(100-pdl).toFixed(2)}}%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card">
          <div class="card-title">今日报警</div>
          <div class="card-value">{{todayUnSafety}}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示 -->
    <el-card class="chart-card" style="height: 100vh">
      <div class="chart-title">欢迎进入人工智能学院学院负责区施工现场</div>
      <div style="display: flex">
        <el-card class="box-card" style="flex: 1; margin-left: 2vw">
          <div slot="header" class="clearfix">
            <span>注意事项</span>
<!--            <el-button style="float: right; padding: 3px 0;color: #0a81fa" type="text" >查看更多</el-button>-->
          </div>
          <div>
            <el-alert
                title="安全第一"
                type="warning"
                description="请所有人员严格遵守安全操作规程，佩戴安全帽、安全鞋等防护装备。"
                :closable="false"
                style="margin-bottom: 10px;"
            ></el-alert>
            <el-alert
                title="环境保护"
                type="success"
                description="施工现场需保持整洁，垃圾分类处理，减少噪音和粉尘污染。"
                :closable="false"
                style="margin-bottom: 10px;"
            ></el-alert>
            <el-alert
                title="设备管理"
                type="info"
                description="所有设备需定期检查，确保正常运行。使用完毕后请及时归位。"
                :closable="false"
                style="margin-bottom: 10px;"
            ></el-alert>
            <el-alert
                title="紧急情况"
                type="error"
                description="如遇紧急情况，请立即联系现场负责人或拨打紧急电话：123 - 456 - 7890。"
                :closable="false"
                icon="el-icon-warning"
                style="margin-bottom: 10px;">
            </el-alert>
          </div>
        </el-card>
        <el-card class="box-card" style="flex: 1;margin-left: 10vw;margin-right: 2vw">
        <div slot="header" class="clearfix">
          <span>提示栏</span>
        </div>
          <div style="margin: auto;text-align: center">
            <img  src="https://img0.baidu.com/it/u=762114621,3000800820&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=276" alt="">
          </div>
      </el-card>
      </div>
    </el-card>

    <!-- 底部信息栏 -->
    <el-footer class="footer">
      <div class="footer-text">
        &copy; 2025 施工现场安全帽识别系统. All rights reserved.
      </div>
      <div class="footer-status">
        <el-tag type="success">运行中</el-tag>
      </div>
    </el-footer>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  name: 'Home',
  data(){
    return{
      isAdmin:false,
      oldList:[],
      feature_list:[],
      pdl:0,
      todayUnSafety:0,
    }
  },
  mounted() {
    this.getHistoryList();
  },
  methods: {
    pathto(url){
      if (url === 'login')
        sessionStorage.removeItem("user");
      this.$router.push('/'+url);
    },
    getHistoryList() {
      this.feature_list = [];
      axios.get("http://127.0.0.1:5003/recordList").then(res => {
        this.feature_list=[...res.data];
        var safetyNum=0;
        const today = new Date();
        const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0);
        const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0, -1);

        this.feature_list.forEach(item=>{
          if (item.label==='helmet')
            safetyNum=safetyNum+1;
          // 解析curtime字符串为Date对象（假设它是ISO 8601格式或可以被Date构造函数正确解析）
          const itemDate = new Date(item.curtime);
          item.time=itemDate;
          // 注意：这里有一个潜在的问题，如果curtime不包含时区信息，并且你的代码在不同的时区运行，
          // 那么这个比较可能不会按预期工作。确保curtime包含时区信息或使用库来处理时区。
          if (item.label==='head'&&itemDate >= startOfDay && itemDate <= endOfDay) {
            this.todayUnSafety++;
          }
        });
        this.oldList=[...this.feature_list];
        this.pdl=(safetyNum/this.oldList.length*100).toFixed(2);
      });
    },
  },
  created() {
    var user=JSON.parse(sessionStorage.getItem('user'));
    if (user && user.username.length>0) {
      if (user.username==='admin')
        this.isAdmin=true;
    }
    else {
      this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #409EFF;
  color: #fff;
  font-size: 18px;
}

.header-title {
  font-weight: bold;
  font-size: 22px;
}

.header-user {
  display: flex;
  align-items: center;
}
.header-user span{
  padding-left: 50px;
}
.header-user span:hover{
  padding-left: 50px;
  /*color: #000303;*/
  font-size: 20px;
  font-weight: 600;
}

.username {
  margin-left: 10px;
}

.data-cards {
  padding: 20px;
}

.card {
  text-align: center;
}

.card-title {
  font-size: 16px;
  color: #909399;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

.chart-card {
  margin: 20px;
  padding: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.chart {
  width: 100%;
  height: 400px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #409EFF;
  color: #fff;
}

.footer-text {
  font-size: 14px;
}

.footer-status {
  font-size: 14px;
}
</style>
